<script setup lang="ts">
import {toRaw} from 'vue'
import { useRouter} from "vue-router"
import {primaryColor_rgb} from "@/theme/config"


const props = withDefaults(
	defineProps<{
		subMenuData: any
		selectKey?: string
		openKeys?: string[]
		activePath?: string[]
		menu_item_hover_bg:string
		iconStyle: any
		textColor:string
		active_pre?:()=>void
	}>(),
	{
		subMenuData: () => ({}),
		selectKey: '',
		openKeys: () => [],
		activePath: () => [],
	}
)


const emits = defineEmits(['activePathChange'])
const router = useRouter()
// const menu_item_hover_bg=ref(props.menu_item_hover_bg)
// console.log(menu_item_hover_bg)

const bindMenuItemClicked=(i:RouteItemConfig)=>{
	// console.log(i)
	if(!i.meta.link&&!i.component) {
		console.warn('请配置组件路径',toRaw(i))
		return
	}
	if(i.meta.link)
	{
	   window.open(i.path)
	   props.active_pre && props.active_pre() 
	}
	else
	router.push({ name:i.name })
    // console.log(props.selectKey)
}

</script>

<template>
	<el-sub-menu :index="subMenuData.name" :popper-offset="20" popper-class="my-submenu-popper">
		<template #title>
			<div class="subMenuIcon">
				<span v-if="subMenuData.meta.icon" :class="['subMenu_icon','iconfont',`icon-${subMenuData.meta.icon}`]" :style="{...iconStyle,color:activePath.includes(subMenuData.name)?primaryColor_rgb:'black'}"></span>
			</div>
			<span class="title" :style="{color:activePath.includes(subMenuData.name)?primaryColor_rgb:textColor}">{{ subMenuData.meta?.title }}</span>
		</template>

		<template v-for="(item, index) in subMenuData.children">
			<el-menu-item :index="item.name" v-if="!item.children" :key="item.name" @click="bindMenuItemClicked(item)">
				<!-- <el-icon :style="{color:selectKey==item.name?'red':'',...iconStyle}">
                    <component :is="item.meta?.icon" />
            </el-icon> -->
				<span v-if="item.meta.icon" :class="['menu_item_icon','iconfont',`icon-${item.meta.icon}`]" :style="{...iconStyle,color:selectKey == item.name?primaryColor_rgb:'black'}"></span>
				<template #title>
					<span class="title">{{ item.meta?.title }}</span>
				</template>
			</el-menu-item>
			<mySubMenu
			  v-else
				:subMenuData="item"
				:key="item.name + index"
				:iconStyle="iconStyle"
				:textColor="textColor"
				:open-keys="openKeys"
				:select-key="selectKey"
				:menu_item_hover_bg="menu_item_hover_bg"
			/>
		</template>
	</el-sub-menu>
</template>

<style lang="scss">
.my-submenu-popper{
	 border: none !important;
	 
	 .el-menu-item:hover {
		//background-color: v-bind(menu_item_hover_bg);    
		// v-bind绑定的不生效，可能是开始该元素是隐藏的原因吧，解决方案是当系统确定使用某个主题色后在，直接写死
		// background-color: rgba(255, 192, 203, 0.2);
	 }
	 .title{
		user-select: none;
		padding-left: 15px;
	 }
}
</style>